<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <style>
         body{
             height:6000px;
         }
       #btn{
           position:fixed;
           bottom:100px;
           right:100px;
            /* 开始按钮的状态隐藏   */
           display:none;
       }
     </style>
</head>
<body>
    <button id="btn">回到顶部</button>
    <script>
        // 【1】最开始的按钮隐藏
        // 【2】当滚动条滚动到1000的位置 显示回到顶部的按钮
        // 【3】点击回到顶部按钮，把滚动条滚动到最顶部
        
        // 利用滚动条方法实现效果
        window.onscroll=function(){
            //  判断滚动条的位置，当滚动条到1000的位置时，显示按钮，小于1000时隐藏按钮
        if(scrollY>=1000){
                btn.style.display='block';
        }else{
            btn.style.display='none';
        }
        }    
        // 给按钮添加点击事件 点击按钮时，让滚动条回到顶部
        // btn.onclick=function(){
            // 一次性回到顶部
            //  scrollTo({top:0})
        // }
        // 利用计时器的功能，让滚动条逐渐回到顶部
        var timer
        btn.onclick=function(){
            // 如果开启定时器的时候使用var 声明变量来表示定时器 我们关不掉
            clearInterval(timer)
             timer=setInterval(function(){
                // 判断当滚动条在0的位置时，清除计时器，不在执行此功能
                if(scrollY<0){
                    clearInterval(timer)
                }
                // 当滚动条大于1000的位置时，每隔1s，让它在原来的基础上-100
                scrollTo({top:scrollY-100})
          },100);
        }
        // 将变量名改为全局变量，解决定时器的重叠问题
    </script>
</html>